<template>
  <div class="login">
    <div class="left_box">
      <div class="logo">
        <el-image fit="fit" :src="require('../assets/images/logo.png')"></el-image>
        <el-image style="width:65%;" fit="fit" :src="require('../assets/images/content_name.png')"></el-image>
      </div>
      <div class="content"></div>
    </div>
    <el-drawer :visible.sync="drawerVisible" :wrapperClosable="false" :with-header="false" :modal="false">
      <el-container>
        <el-header>用户登录</el-header>
        <el-main>
          <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
            <div>帐号</div>
            <el-form-item prop="username">
              <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <div>密码</div>
            <el-form-item prop="password">
              <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <div>验证码</div>
            <div>
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-form-item prop="code">
                    <el-input type="text" class="code" v-model="loginForm.code" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-image
                      style="width: 155px;"
                      :src="require('../assets/images/imagecode.svg')"
                      fit="fit"></el-image>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </el-main>
        <el-footer>
          <el-row>
            <el-col :span="12">
              <el-button @click="handlerLogin('loginForm')" type="primary" v-loading.fullscreen.lock="fullscreenLoading"><i class="el-icon-video-play"></i>登录</el-button>
            </el-col>
            <el-col :span="12">
              <el-button @click="handlerRest('loginForm')" type="info"><i class="el-icon-refresh-right"></i>重置</el-button>
            </el-col>
          </el-row>
        </el-footer>
      </el-container>
    </el-drawer>
    <!-- 滑块验证码 -->
    <Vcode :show="isShow" @success="success"/>
  </div>
</template>

<script>
import Vcode from 'vue-puzzle-vcode'
export default {
  name: "login",
  data() {
    return {
      drawerVisible:true, //左侧登录抽屉是否显示
      direction: "rtl", 
      fullscreenLoading: false,
      isShow: false, // 验证码模态框是否出现
      loginForm:{
        username:'admin',
        password:'admin',
        code:'123'
      },
      loginRules:{
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
      }
    };
  },
  components:{ Vcode },
  methods: {
    verifySubmit(){
      this.isShow = true;
    },
    handlerLogin(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //this.drawerVisible=false;
          this.isShow = true;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 用户通过了验证
    success(msg){
      this.isShow = false; // 通过验证后，需要手动隐藏模态框
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
        this.$router.push('/home');
      }, 2000);
    },
    handlerRest(formName){
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style>
.login .el-drawer{opacity: .9;}
.login .el-input__inner{border: 0;border-bottom: 1px solid #9C9890;border-radius: 0;padding: 0;}
.el-drawer__wrapper{z-index: 1 !important;}
</style>
<style scoped>
.login {
  height: 100vh;
  background-image: url("../assets/images/log_bg.jpg");
  background-size: 100%;
}
.el-image{
  position: relative;
  top: -20px;
}
header{
  font-size: 30px;
  font-family: "微软雅黑";
  font-weight: bold;
  color: #6CCFE4;
  position: relative;
  top: 40px;
  left: 30px;
}
.el-main{
  margin-top: 60px;
  margin-left:30px;
}
.el-main div:nth-child(2n-1){
  font-size: 20px;
  font-family: "微软雅黑";
  font-weight: bold;
  color: #9C9890;
}
.el-form>div{
  margin-top: 20px;
}
.el-main .el-input{
  width: 400px;
  height: 40px;
  font-size: 18px;
}
.el-main .code{
  width: 270px;
}
footer{
  background-color: white;
}
.el-button{
  height: 50px;
  width: 180px;
  font-size: 20px;
  border-radius: 0;
}
.el-button i{
  margin-right: 10px;
}

.left_box{
  display: flex;
  flex-direction:column;
  justify-content:center;
  width: 70%;
  height: 100vh;
  box-sizing: border-box;
  padding: 0 120px;
}
.left_box .logo{
  border-bottom: 2px solid white;
  display: flex;
  justify-content: space-between;
}
</style>
